<template>
  <div>
    <div class="h-panel">
      <div class="h-panel-bar">
        <span class="h-panel-title">用户管理</span>
        <span class="h-panel-right">
          <router-link to="/users/user/new">新增</router-link>
        </span>
      </div>
      <div class="h-panel-body">
        <Table
          :datas="page.content"
          :border="true"
          :stripe="true"
          :loading="loading"
          @sort="triggerSort"
          style="cursor: pointer"
          :selectRow="true"
          @trclick="edit"
        >
          <TableItem title="姓名" prop="name" :sort="true"></TableItem>
          <TableItem title="登录名" prop="loginName" :sort="true" sortProp="loginName"></TableItem>
          <TableItem title="手机号码" prop="mobilePhone"></TableItem>
          <TableItem title="电子邮箱地址" prop="email"></TableItem>
          <TableItem title="是否已销户">
            <template slot-scope="{data}">
              <h-switch
                v-model="data.enabled"
                :disabled="true"
                :trueValue="true"
                :falseValue="false"
              >
              <!-- data.enabled === true -->
                <span slot="open">未销户</span>
                <span slot="close">已销户</span>
              </h-switch>
            </template>
          </TableItem>
          <TableItem title="封号">
            <template slot-scope="{data}">
               <LockAccountButton  :user = "data"/>
            </template>
          </TableItem>
          <div slot="empty">自定义提醒：暂时无数据</div>
        </Table>
        <Pagination
          :cur="page.number + 1"
          :total="page.totalElements"
          :size="page.size"
          @change="reload"
          align="center"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>

import axios from "axios";
import LockAccountButton from "./LockAccountButton";
export default {
   components: { LockAccountButton },
  data() {
    return {
      loading: null,
      page: {},
      sort: {
        ob: null,
        dire: null
      }
    };
  },
  mounted() {
    this.reload(null);

  },
  methods: {
    reload(data) {
      if (!data) {
        data = {
          page: 1,
          size: 10
        };
      }
      this.page.number = data.page - 1;

      let params = {
        ps: data.size,
        pn: this.page.number,
        ob: this.sort.ob,
        dire: this.sort.dire
      };

      axios.get("/api/user-center/user", { params: params }).then(response => {
        this.page = response.data;
      });
    },
    triggerSort(sort) {
      let prop = sort.prop;
      let type = sort.type;
      this.sort.ob = prop;
      this.sort.dire = type;

      this.reload();
    },
    edit(user, event) {
      let id = user.id;
      // router.push("/users/user/" + id);
      // js的模板语法，路径参数
      this.$router.push(`/users/user/${id}`);
    }
  }
};
</script>

<style>
.h-panel-body {
  padding: 0px;
}
.h-table-sort-handler > span.h-table-sort-selected {
  color: red;
}
.h-switch .h-switch-span[checked][disabled] {
  background-color: #45b984;
}
</style>